/*
 * @Author: Leng
 * @Date: 2021-02-02 11:04:35
 * @Description: 换肤场景
 * @FilePath: \vue-leng\src\assets\scss\theme\theme-mixin.scss
 */
 
/* sass换肤使用
<p @click="changeTheme('theme1')"></p>
changeTheme (theme) {
  window.document.documentElement.setAttribute('data-theme', theme)
}
  .skContent{
    @include defaultBlock;
    @include bg_color('');
    @include font_color('')
  }
*/ 

/**
 * @param 设置字体大小
 */
// @mixin size($size){
//   font-size:$size;
//   @include font-dpr($size);
// }

/**
 * @param 文字颜色
 */
@mixin color($item){
  color: $item;
  [data-theme="theme1"] & {
    color:$color-theme1;
  }
  [data-theme="theme2"] & {
    color:$color-theme2;
  }
}

/**
 * @param 浅色背景
 */
@mixin bgcolor($item){
  background-color:$item;
  [data-theme="theme1"] & {
    background-color:$bg-color-theme1;
  }
  [data-theme="theme2"] & {
    background-color:$bg-color-theme2;
  }
}

/**
 * @param 深色背景
 */
@mixin bgdcolor($item){
  background-color:$item;
  [data-theme="theme1"] & {
    background-color:$bg-dcolor-theme1;
  }
  [data-theme="theme2"] & {
    background-color:$bg-dcolor-theme2;
  }
}

/**
 * @param 背景图
 */
 @mixin bgimg($item){
    background-image:$item;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  [data-theme="theme1"] & {
    background-image:$bg-img-theme1;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  [data-theme="theme2"] & {
    background-image:$bg-img-theme2;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}